<template>
    <div class="content">
        <div class="drag"></div>
    </div>
</template>
<script>
export default {
    mounted() {
        let drag = document.querySelector(".drag");
        let content = document.querySelector('.content');
        let width, height, maxWidth, maxHeight, tx, ty, startX, startY;
        let minWidth = 30
        // 初始化
        let init = () => {
            drag.style.transform = "translate(0px,0px)"
            maxWidth = content.clientWidth;
            maxHeight = content.clientHeight;
        }
        let getInfo = (e) => {
            // 获取元素当前的宽高
            width = drag.clientWidth
            height = drag.clientHeight
            // 获取元素当前的偏移量
            let translateStr = drag.style.transform
            const reg = /\d+/g
            let translateArr = translateStr.match(reg)
            tx = Number(translateArr[0]);
            ty = Number(translateArr[1]);
            // 记录鼠标的起始位置
            startX = e.clientX
            startY = e.clientY
        }
        let onDrag = () => {
            drag.addEventListener("mousedown", (e) => {
                getInfo(e)
                document.onmousemove = (e) => {
                    // let distanceX = tx + e.clientX - startX;
                    // let distanceY = ty + e.clientY - startY;
                    // 有边界的
                    let distanceX = Math.max(0, Math.min(tx + e.clientX - startX, maxWidth - width));
                    let distanceY = Math.max(0, Math.min(ty + e.clientY - startY, maxHeight - height));
                    drag.style.transform = `translate(${distanceX}px, ${distanceY}px)`
                }
                document.onmouseup = () => {
                    document.onmousemove = null
                }
            })
        }

        let left = null;
        function addLeft() {
            left = document.createElement("div")
            left.className = "left"
            drag.append(left)
        }

        function leftZoom() {
            left.addEventListener("mousedown", (e) => {
                e.stopPropagation()
                getInfo(e)
                document.onmousemove = (e) => {
                    // 注意这里是➖
                    // 限制修小宽
                    // let newWidth = Math.max(minWidth, width - (e.clientX - startX))
                    // let distanceX = Math.min(tx + width - minWidth, tx + (e.clientX - startX))

                    // 最大宽度为元素当前偏移量 + 最初的宽度，最小宽度为minWidth
                    let newWidth = Math.min(tx + width, Math.max(minWidth, width - (e.clientX - startX)));
                    // 最大偏移为已经偏移的距离 + 目标元素的宽度 - 最小宽度,最小偏移为0
                    let distanceX = Math.max(0,Math.min(tx + width - minWidth, tx + (e.clientX - startX)));

                    drag.style.width = `${newWidth}px`
                    drag.style.transform = `translate(${distanceX}px, ${ty}px)`
                }
                document.onmouseup = () => {
                    document.onmousemove = null
                }
            })
        }
        init();
        onDrag();
        addLeft();
        leftZoom();
    }
}
</script>
<style>
.content {
    width: 80%;
    height: 60vh;
    background-color: white;
    border: 1px solid #333;
    position: relative;
}

.drag {
    width: 160px;
    height: 160px;
    background-color: red;
}

.left {
    width: 10px;
    height: calc(100% - 14px);
    margin: 7px 0px;
    position: absolute;
    background-color: #000;
    cursor: col-resize;
    top: 0;
    left: -5px;
}
</style>